<script setup>
import { apiDetails } from '../api/index'
import { NavBar, Swipe, SwipeItem, Icon, Image as VanImage } from 'vant'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const myAudio = ref(null)
const rangeMax = ref(0)
const rangeValue = ref(0)

const detailsData = ref({
  title: '',
  banner: [],
  thumbnail: {},
  voice: null,
  details: ''
})
const villageData = ref({
  name: '',
  lng: '',
  lat: ''
})
if (route.query.id) {
  apiDetails({ id: route.query.id }).then(async (res) => {
    detailsData.value = res.data.marker
    villageData.value = res.data.village
    await nextTick()
    if (res.data.voice) {
      myAudio.value.addEventListener('timeupdate', function() {
        rangeValue.value = myAudio.value.currentTime
      })
    }
  })
}

onMounted(() => {
  // console.log('ddddddddddd', route)
  
  // if (route.query)
  // apiDetails

  // await nextTick()
  
})
function getTime(value) {
  let secondTime = parseInt(value); // 秒
  let minuteTime = 0 // 分
  let hourTime = 0 // 时
  if (secondTime > 60) {
    //如果秒数大于60，将秒数转换成整数
    //获取分钟，除以60取整，得到整数分钟
    minuteTime = parseInt(secondTime / 60)
    //获取秒数，秒数取余，得到整数秒数
    secondTime = parseInt(secondTime % 60)
    //如果分钟大于60，将分钟转换成小时
    if (minuteTime > 60) {
      //获取小时，获取分钟除以60，得到整数小时
      hourTime = parseInt(minuteTime / 60)
      //获取小时后取余的分，获取分钟除以60取余的分
      minuteTime = parseInt(minuteTime % 60)
    }
  }
  //若秒数是个位数，前面用0补齐
  secondTime = secondTime < 10 ? "0" + secondTime : secondTime
  var result = "" + secondTime + ""
  if (minuteTime > 0) {
  	//若分钟数是个位数，前面用0补齐
    minuteTime = minuteTime < 10 ? "0" + minuteTime : minuteTime
    result = "" + minuteTime + ":" + result
  } else {
  	//若分钟数为0，用"00"表示
    result = "" + "00" + ":" + result
  }

  if (hourTime > 0) {
  	//若小时数是个位数，前面用0补齐
    hourTime = hourTime < 10 ? "0" + hourTime : hourTime
    result = "" + hourTime + ":" + result
  } else {
    //若小时数为0，用"00"表示
    result = "" + "00" + ":" + result
  }
  // console.log("result",result)
  return result
}

const volume = ref(0)
const onPlay = () => {
  rangeMax.value = myAudio.value.duration
  if (detailsData.value.voice) {
    
    if (myAudio.value.paused) {
      myAudio.value.play()
    } else {
      myAudio.value.pause()
    }
  }
}

// 导航
const onMapNav = () => {
  console.log('villageData', villageData.value)
  window.open(`http://api.map.baidu.com/marker?location=${villageData.value.lat},${villageData.value.lng}&title=${villageData.value.name}&content=&output=html&src=webapp.baidu.openAPIdemo`)

}
</script>
<template>
  
  <div>
    <NavBar
      title="点位详情"
      left-arrow
      @click-left="() => router.go(-1)"
    />
  </div>

  <div>
    <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <template v-for="item in detailsData.banner" :key="item.id">
        <SwipeItem>
          <VanImage
            class="img-wrap"
            :src="item.url"
          />
        </SwipeItem>
      </template>
    </Swipe>
  </div>
  <div class="main">
    <!-- 标记名称 -->
    <div class="title">
      {{ detailsData.title }}
    </div>

    <!-- 导航 -->
    <div class="nav-wrap">
      <div class="village-name">{{ villageData.name }}</div>
      <div @click="onMapNav">
        地图<Icon name="arrow" />
      </div>
    </div>

    <!-- 讲解 -->
    <div v-if="detailsData.voice">
      <audio ref="myAudio" controls style="display: none;">  
        <source :src="detailsData.voice.url" type="audio/mpeg">  
      </audio>
      <div class="custom-audio-player">
        <div class="audio-btn" @click="onPlay">
          <div class="audio-btn-icon">
            <Icon :name="myAudio && myAudio.paused ? 'play' : 'pause'" />
          </div>
        </div>
        <div class="audio-range">
          <input type="range" min="0" :max="rangeMax" step="0.1" :value="rangeValue">
          <div class="progress-time">{{ getTime(rangeValue) }} / {{ getTime(rangeMax) }}</div>
        </div>
        
      </div>
    </div>

    <!-- 简介 -->
    <div>
      <div style="margin: 0 0 10px 0">简介</div>
      <div>{{ detailsData.details }}</div>
    </div>
  </div>
</template>

<style scoped>
input[type=range] {  
    -webkit-appearance: none; /* 移除默认样式 */  
    background-color: #f3f3f3; /* 轨道背景色 */  
    width: 100%; /* 宽度 */  
    height: 6px; /* 高度 */  
    border-radius: 5px; /* 圆角 */  
    margin: 10px 10px; /* 上下外边距 */  
    /* cursor: pointer; 鼠标悬停时的样式   */
}  
  
/* 设置滑块样式 */  
input[type=range]::-webkit-slider-thumb {  
    -webkit-appearance: none; /* 移除默认样式 */  
    width: 20px; /* 滑块宽度 */  
    height: 20px; /* 滑块高度 */  
    background-color: #4CAF50; /* 滑块背景色 */  
    border-radius: 50%; /* 滑块形状 */  
    cursor: pointer; /* 鼠标悬停时的样式 */  
    -webkit-transition: .2s; /* 过渡效果 */  
    margin-top: -5px; /* 调整滑块位置 */  
}  
  
/* 设置滑块被点击或触摸时的样式 */  
input[type=range]::-webkit-slider-thumb:active {  
    background-color: #45a049; /* 被点击或触摸时的背景色 */  
}  
  
/* Firefox 浏览器中的滑块样式 */  
input[type=range]::-moz-range-track {  
    background-color: #f3f3f3; /* 轨道背景色 */
    border: none; /* 无边框 */
}

input[type=range]::-moz-range-thumb {  
    background-color: #4CAF50; /* 滑块背景色 */  
    border: none; /* 无边框 */  
    border-radius: 50%; /* 滑块形状 */  
}
.main {
  padding: 40px;
}
.main > div {
  margin: 0 0 40px 0;
}
.title {
  font-size: 36px;

}
.my-swipe .van-swipe-item {
    color: #fff;
    /* font-size: 20px; */
    /* line-height: 150px; */
    height: 400px;
    text-align: center;
    background-color: #39a9ed;
  }
.audio-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-image: url(https://qianlucun.quchutech.com/file/dest/resource/image/2023-12-20/1737377744375619584.png);
}
.audio-btn-icon {
  /* padding: 20px; */
  width: 80px;
  height: 80px;
  background: #00000066;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-audio-player {
  display: flex;
  align-items: stretch;
}
.audio-range {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}
.nav-wrap {
  height: 80px;
  background-image: url(/src/assets/img/location_bg.png);
  background-repeat: no-repeat;
  background-size:contain;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.village-name {
  margin-left: 80px;
}
.progress-time {
  font-size: 24px;
  position: absolute;
  bottom: 0;
  right: 0;
  
}
.img-wrap {
  width: 100%;
  height: 100%;
}
</style>
